<template>
  <n-config-provider
    :locale="zhCN"
    :theme="getDarkTheme"
    :theme-overrides="getThemeOverrides"
    :date-locale="dateZhCN"
  >
    <app-provider>
      <RouterView />
    </app-provider>
  </n-config-provider>
</template>

<script setup>
import {
  zhCN,
  dateZhCN,
  createTheme,
  inputDark,
  datePickerDark,
  darkTheme,
} from 'naive-ui'
import { computed } from 'vue'
import { useSetting } from '@/store/modules/setting'
import AppProvider from '@/components/Application.vue'
import { lighten } from '@/utils/index'

const settingStore = useSetting()

const getDarkTheme = computed(() =>
  settingStore.darkTheme ? darkTheme : undefined
)

const getThemeOverrides = computed(() => {
  const appTheme = settingStore.appTheme
  const lightenStr = lighten(settingStore.appTheme, 6)
  return {
    common: {
      primaryColor: appTheme,
      primaryColorHover: lightenStr,
      primaryColorPressed: lightenStr,
    },
    LoadingBar: {
      colorLoading: appTheme,
    },
  }
})
</script>

<style lang="less">
@import 'styles/index.less';
</style>
